// src/pages/illness/index.tsx
import { Helmet } from "react-helmet";
import Header from "@shared/header";
import TextareaAutosize from "react-textarea-autosize";
import { PictureOutline, CloseShieldOutline } from "antd-mobile-icons";
import styles from "@styles/illness.module.scss";
import classNames from "classnames";
import {useEffect, useState} from "react";
import { IllnessTime } from "@enums/consult";
import {useUploadMutation} from "@store/apiSlice/uploadApiSlice";
import {Dialog, Toast} from "antd-mobile";
import {z} from "zod";
import {useDispatch} from "react-redux";
import {saveConsult, selectConsult} from "@store/slices/consultSlice";
import {useNavigate} from "react-router-dom";
import {useTypedSelector} from "@store/index";

//验证器
const schema = z.object({
    illnessDesc: z.string().min(1,"病情描述不能为空"),
    illnessTime: z.number().gt(0).lt(5),
    consultFlag: z.number().gt(-1).lt(2)
})
export default function Illness() {
    // 用于记录病情
    const [formState, setFormState] = useState<
        Partial<
            Pick<Consult, "illnessDesc" | "illnessTime" | "consultFlag" | "pictures">
            >
        >({});
    //用于文件上传
    const [upload]  = useUploadMutation();
    //文件上传
    const onFileChange = (event:React.ChangeEvent<HTMLInputElement>) => {
        //创建formData对象
        const formData = new FormData();
        //获取文件夹
        const files = event.currentTarget.files;
        //如果文件不存在，阻止程序继续运行
        if(files === null) return;
        //获取文件
        const file = files[0];
        //判断文件是否小于5M
        if (file.size / 1024 / 1024 > 5)
            return Toast.show({ content: "图片不能大于5M" });
        // 为 formData 追加数据
        formData.append("file", file);
        //上传图片
        upload(formData)
            .unwrap()
            .then((response) => {
                setFormState({
                    ...formState,
                    pictures: [...(formState.pictures || []), response.data],
                });
            });
    }
    // 删除图片
    const removePicture = (id: string) => {
        setFormState({
            ...formState,
            pictures: formState.pictures!.filter((item) => item.id !== id),
        });
    };
    //用于存储是否通过验证的标识
    const [isValid,setIsValid] = useState(false);
    //获取dispatch 方法
    const dispatch = useDispatch()
    // 获取页面跳转方法
    const navigate = useNavigate();
    //检测formState是否发生变化
    useEffect(()=>{
        //对象格式验证并记录结果
        setIsValid(schema.safeParse(formState).success)

    },[formState])
    //跳转下一步
    const nextStep = ()=>{
        if(isValid){
            dispatch(saveConsult(formState));
            navigate("/patient?select=1");
        }else {
            Toast.show({ content: "信息不完整" });
        }

    }
    // 从本地获取问诊信息
    const consult = useTypedSelector(selectConsult);

    //检测本地是否包含病情描述数据
    useEffect(()=>{
        //组件初始渲染后检测本地是否包含病情描述
        if(typeof consult.illnessDesc!=="undefined"){
            //和用户确认
            Dialog.confirm({
                title: "温馨提示",
                content:"是否恢复之前填写的病情信息呢?",
                onConfirm: ()=>{
                    //填充本地数据
                    setFormState(consult)
                }
            })
        }
    },[consult])

    return (
        <>
            <Helmet>
                <title>优医问诊-病情描述</title>
            </Helmet>
            <Header title="病情描述" />
            <div className={styles.page}>
                <div className={styles.doctor}>
                    <div className={styles.avatar}>
                        <img src='https://cp.itheima.net/assets/avatar-doctor.6cf240f4.svg' alt="" />
                    </div>
                    <div className={styles.content}>
                        <div className={styles.name}>在线医生</div>
                        <div className={styles.talk}>
                            请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助
                        </div>
                        <div className={styles.tip}>
                            <img src={require("@icons/consult/safe.svg").default} alt="" />
                            <span>内容仅医生可见</span>
                        </div>
                    </div>
                </div>
                <TextareaAutosize
                    className={styles.textarea}
                    placeholder="请详细描述您的病情，病情描述不能为空"
                    value={formState.illnessDesc}
                    onChange={(event)=>setFormState({...formState,illnessDesc:event.currentTarget.value})}
                />
                <div className={styles.description}>
                    <div className={styles.name}> 本次患病多久了</div>
                    <ul className={styles.options}>
                        <li
                            onClick={() =>
                                setFormState({ ...formState, illnessTime: IllnessTime.Week })
                            }
                            className={classNames({
                                [styles.active]: formState.illnessTime === IllnessTime.Week,
                            })}
                        >
                            一周内
                        </li>
                        <li
                            onClick={() =>
                                setFormState({
                                    ...formState,
                                    illnessTime: IllnessTime.Month,
                                })
                            }
                            className={classNames({
                                [styles.active]: formState.illnessTime === IllnessTime.Month,
                            })}
                        >
                            一月内
                        </li>
                        <li
                            onClick={() =>
                                setFormState({
                                    ...formState,
                                    illnessTime: IllnessTime.HalfYear,
                                })
                            }
                            className={classNames({
                                [styles.active]: formState.illnessTime === IllnessTime.HalfYear,
                            })}
                        >
                            半年内
                        </li>
                        <li
                            onClick={() =>
                                setFormState({ ...formState, illnessTime: IllnessTime.More })
                            }
                            className={classNames({
                                [styles.active]: formState.illnessTime === IllnessTime.More,
                            })}
                        >
                            大于半年
                        </li>
                    </ul>
                </div>
                <div className={styles.description}>
                    <div className={styles.name}> 此次病情是否去医院就诊过</div>
                    <ul className={styles.options}>
                        <li
                            onClick={() => setFormState({ ...formState, consultFlag: 1 })}
                            className={classNames({
                                [styles.active]: formState.consultFlag === 1,
                            })}
                        >
                            就诊过
                        </li>
                        <li
                            onClick={() => setFormState({ ...formState, consultFlag: 0 })}
                            className={classNames({
                                [styles.active]: formState.consultFlag === 0,
                            })}
                        >
                            没就诊过
                        </li>
                    </ul>
                </div>
                <div className={styles.upload}>
                    {formState.pictures?.map((item) => (
                        <div className={styles.imgContainer} key={item.id}>
                            <img src={item.url} alt="" />
                            <CloseShieldOutline
                                className={styles.close}
                                onClick={() => removePicture(item.id)}
                            />
                        </div>
                    ))}
                    {typeof formState.pictures === "undefined" ||
                    formState.pictures.length < 9 ? (
                        <div className={styles.uploader}>
                            <PictureOutline />
                            <span>上传图片</span>
                            <input type="file" onChange={onFileChange} accept="image/*" />
                        </div>
                    ) : null}
                    {typeof formState.pictures === "undefined" ||
                    formState.pictures.length === 0 ? (
                        <div className={styles.tips}>
                            上传内容仅医生可见, 最多9张图, 最大5MB
                        </div>
                    ) : null}
                </div>
                <div    className={classNames(styles.next, { [styles.disabled]: !isValid })}
                        onClick={() => nextStep()}>下一步</div>
            </div>
        </>
    );
}